<template>
  <div>
    <!-- 头部卡片 -->
    <Tabber
      :headerinfo="headerinfo"
      :search-form="searchForm"
      :status="status"
      @search="searchFn"
      @reset="resetFn"
    />
    <!-- 表格卡片 -->
    <TabConter
      :tab-headerinfo="tabHeaderinfo"
      :warehouse-info="warehouseInfo"
      :params="params"
      :page-all="pageAll"
      :status="status"
      :temperature="temperature"
      :warehouse-type="warehouseType"
      :bearing="bearing"
      :use="use"
      @getPageInfo="getPageInfo"
      @add="addFn"
      @eidt="eidtBtn"
      @stop="stopBtn"
      @del="delBtn"
    />
  </div>
</template>

<script>
import Tabber from '@/components/TabBer'
import TabConter from '@/components/TabConter'
import { Message } from 'element-ui'
// 获取全部仓库数据  修改库区信息 删除库区信息
import { searchWarehouseInfo, putReservoirAreaInfo, delReservoirAreaInfo } from '@/api'
export default {
  components: {
    Tabber,
    TabConter
  },
  data() {
    return {
      // 保存仓库状态 状态 0 停用 1启用
      status: [
        { value: ' ', label: '全部' },
        { value: 0, label: '停用' },
        { value: 1, label: '启用' }
      ],
      // 用途类型
      use: {
        'RKHCQ': '入库缓存区',
        'CKHCQ': '出库缓存区',
        'CCQ': '存储区',
        'FJQ': '分拣区',
        'ZJQ': '质检区'
      },
      // 承重类型
      bearing: {
        'ZX': '重型',
        'BX': '中型',
        'QX': '轻型'
      },
      // 温度类型
      temperature: {
        'CW': '常温',
        'LC': '冷藏',
        'HW': '恒温'
      },
      // 表头信息
      tabHeaderinfo: {
        idx: '序号',
        belongs: '所属仓库',
        id: '库区编号',
        name: '库区名称',
        temperature: '温度类型',
        bearing: '承重类型',
        use: '用途属性',
        type: '库区状态',
        hear: '负责人',
        phone: '联系电话',
        num: '库区数量',
        upTime: '更新时间',
        operate: '操作'
      },
      // 储存仓库头部信息
      headerinfo: {
        id: '仓库名称',
        name: '库区名称',
        type: '仓库状态'
      },
      //  仓库类型
      warehouseType: {
        'ZZ': '中转仓',
        'JG': '加工仓',
        'CB': '储备仓',
        'LC': '冷藏仓'
      },
      // 绑定表单信息
      searchForm: {
        Id: '',
        Uname: '',
        State: ''
      },
      // 保存tab栏数据
      warehouseInfo: [],
      // 设置初始页码值
      params: {
        current: 1, // 当前页
        size: 10 // 每页数据
      },
      // 保存获取到的页码值
      pageAll: {
        pageSize: '', // 总页数
        pageCount: ''// 总数据条数
      }
    }
  },
  created() {
    this.getPageInfo()
  },
  methods: {
    // 删除
    async delBtn(id) {
      await delReservoirAreaInfo(id)
      Message.success('删除成功')
      this.getPageInfo()
    },
    // 停用
    async stopBtn(val) {
      // console.log(val)
      await putReservoirAreaInfo({
        id: val.id,
        status: val.status === 1 ? 0 : 1
      })
      this.getPageInfo()
    },
    // 编辑信息
    async eidtBtn(id) {
      this.$store.commit('user/setTxet', this.$router.history.current.meta.title)
      this.$router.push({ name: `details`, params: { id: id }})
    },
    // 添加信息
    addFn() {
      this.$store.commit('user/setTxet', this.$router.history.current.meta.title)
      this.$router.push({ name: `details`, params: { id: 'null' }})
    },
    // 顶部表单搜索按钮
    async searchFn() {
      const res = await searchWarehouseInfo({
        warehouseName: this.searchForm.Id || '',
        name: this.searchForm.Uname || '',
        status: this.searchForm.State || '',
        size: this.params.size || '',
        current: this.params.current || ''
      })
      this.warehouseInfo = res.data.records
      this.pageAll.pageSize = res.data.pages
      this.pageAll.pageCount = res.data.total
    },
    // 顶部表单重置按钮
    resetFn() {
      this.searchForm.Id = ''
      this.searchForm.Uname = ''
      this.searchForm.State = ''
      this.getPageInfo()
    },
    // 获取页面信息
    async getPageInfo() {
      const res = await searchWarehouseInfo(this.params)
      this.warehouseInfo = res.data.records
      this.pageAll.pageSize = res.data.total
      this.pageAll.pageCount = res.data.pages
      Message.success(res.msg)
      // console.log(this.warehouseInfo)
    }
  }
}
</script>

